/**
 * ref  createRef 表示形式
 */
import React, { Component } from 'react'

export default class RefCom3 extends Component {
  // 1. 声明实例对象属性
  input = React.createRef(); //相当于是一个容器
  result = React.createRef();

  render() {
    return (
      <div>
        {/* 2. 为元素设置 ref 属性 */}
        <input type="text" ref={this.input} /> <button onClick={this.show}>显示</button>
        <hr />
        <div ref={this.result} style={{width: 400, height: 300, border:'solid 1px #666'}}></div>
      </div>
    )
  }
  //单击事件的回调
  show = () => {
    // 3. 获得真实 dom 对象
    let input = this.input.current;
    let v = input.value;
    //设置
    this.result.current.innerHTML = v; //current 『当前』的意思
  }
}
